<template>
  <el-card>
    <div slot="header">
      <h3>开发计划详情-开发完成查看</h3>
    </div>
    <div class="page-body">
      <basic-form
        showColon
        defaultExpandStatus
        formItemWidth="170px"
        :showBtnBar="false"
        :formColumns="formItems"
        :dataSource="formData"
      >
        <FormPopover
          slot="category"
          :content="formData.categoryPath"
          :popover-list="formData.categoryPathSet"
        />
        <FormPopover
          slot="supplierInspection"
          :content="formData.supplierInspectionNosStr"
          :popover-list="formData.supplierInspectionNos"
        />
        <FormPopover
          slot="productAccessRecord"
          :content="formData.productAccessRecordNosStr"
          :popover-list="formData.productAccessRecordNos"
        />
        <FormPopover
          slot="spuAddSkuRecord"
          :content="formData.spuAddSkuRecordNosStr"
          :popover-list="formData.spuAddSkuRecordNos"
        />
        <FormPopover
          slot="addMultiSuppliesRecord"
          :content="formData.addMultiSuppliesRecordNosStr"
          :popover-list="formData.addMultiSuppliesRecordNos"
        />
        <FormPopover
          slot="addSaleAreaRecord"
          :content="formData.addSaleAreaRecordNosStr"
          :popover-list="formData.addSaleAreaRecordNos"
        />
      </basic-form>
      <el-divider content-position="left">开发需求明细</el-divider>
      <el-row>
        <SkusTable
          :maxTableHeight="480"
          :defaultMinWidth="100"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
        />
      </el-row>
      <FooterFields :fieldsItems="fieldsItems" :fieldsData="fieldsData" />
    </div>
  </el-card>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import FormPopover from '../components/DevelopPlanForm/FormPopover';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import { FIELDS_ITEMS } from './constants/actionPage';
import { COMPLETE_FORM_ITEMS, FINISH_VIEW_TABLE_COLUMNS } from './constants/view';
import { TableInfo } from '@/utils/getUtils';
import { getDevPlanInfoService } from '@/api/commodity/developmentRequirementPlan/developPlan';
export default {
  components: {
    BasicForm,
    SkusTable,
    FormPopover,
    FooterFields
  },
  data () {
    return {
      formItems: COMPLETE_FORM_ITEMS,
      formData: {},
      TableInfo: new TableInfo({ columns: FINISH_VIEW_TABLE_COLUMNS }),
      fieldsItems: FIELDS_ITEMS,
      fieldsData: {},
    }
  },
  mounted () {
    this.loadDevPlanInfo()
  },
  methods: {
    // 加载开发详情
    async loadDevPlanInfo () {
      const data = { planNo: this.$route?.query?.planNo }
      const res = await getDevPlanInfoService(data, '.page-body')
      if (res?.retData) {
        this.TableInfo.setList(res.retData.detailVoList)
        this.fieldsData = res.retData
        this.formData = {
          ...res.retData,
          supplierInspectionNosStr: res?.retData?.supplierInspectionNos?.join(','),
          productAccessRecordNosStr: res?.retData?.productAccessRecordNos?.join(','),
          spuAddSkuRecordNosStr: res?.retData?.spuAddSkuRecordNos.join(','),
          addMultiSuppliesRecordNosStr: res?.retData?.addMultiSuppliesRecordNos?.join(','),
          addSaleAreaRecordNosStr: res?.retData?.addSaleAreaRecordNos?.join(','),
        }
      }
    },
  }
}
</script>
<style lang="less" scoped>
.category-path-content {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-path-list {
  height: 200px;
  overflow: hidden;
  overflow-y: auto;
  li {
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
  }
}
</style>
